<template>
	<view class="wrapper">
		<head-title showLeftButton="true" titleText="消息通知"></head-title>
		<scroll-view scroll-y :style="{height:windowH + 'px'}">
			<view class="cont">
				<view @longpress.stop="bindDel(item.id)" @tap="bindMsg(item.to_uid)" v-for="(item,index) in chatList" :key="index" class="list flex_row">
					<view class="headPic">
						<image :src="item.to_img" mode="aspectFill"></image>
					</view>
					<view class="msg">
						<view class="left flex_row">
							<view class="userName flex_row">
								<text>{{item.to_nickname}}</text>
								<image v-if="item.to_sex==1" src="../../static/image/man.png"></image>
								<image v-else src="../../static/image/woman.png"></image>
							</view>
							<view class="right flex_row">
								<view class="time">{{item.update_time_str}}</view>
							</view>
						</view>
						<view class="text flex_row">
							<view class="txt">{{item.last_msg}}</view>
							<view v-if="item.no_read_num!=0" class="pot">
								<text v-if="item.no_read_num>99">99+</text>
								<text v-else>{{item.no_read_num}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import headTitle from "../../components/headTitle.vue";
	import common from '../../common/network.js';
	var session = '';
	export default {
		components:{headTitle},
		data(){
			return{
				windowH:0,chatList:[],
			}
		},
		onLoad:function(options){
			if(options.session!=undefined){
				session = options.session;
				this.getMsg();
			}
			this.getHeight();
		},
		onShow:function(){
			if(this.chatList!=''){
				this.getMsg();
			}
		},
		methods:{
			getHeight:function(){
				var that = this;
				common.network.getHeight(function(h,w,bar){
					that.windowH = h - w/750 * 142;
				})
			},
			getMsg:function(){
				var that = this;
				var $data = {
					'type':'zmsg_chat_list',
					'session':session,
				};
				common.network.request($data,function(res){
					console.log(res);
					
					that.chatList = res.chat_msg
				})
			},
			bindMsg:function(uid){
				uni.navigateTo({
					url:'/pagesA/chat/chat?session='+session+'&userid='+uid,
				})
			},
			bindDel:function(ids){
				var that = this;
				uni.showModal({
					content:"您要删除该用户的消息列表吗？",
					confirmColor:'#6278FF',
					success:function(e){
						if(e.confirm){
							that.delData(ids);
						}
					}
				})
			},
			delData:function(ids){
				var that = this;
				var $data = {
					'type':'zmsg_del_chat',
					'session':session,
					'id':ids
				};
				common.network.request($data,function(res){
					console.log(res);
					that.getMsg();
				})
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		background: #F2F3F7;
	}
	.cont{
		padding: 12px;
	}
	.list{
		padding: 30px 26px;
		background: #fff;
		margin-bottom: 10px;
		border-radius: 8px;
		/* align-items: flex-start; */
	}
	.headPic{
		width: 120px;
		height: 120px;
		min-width: 120px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 26px;
	}
	.headPic image{
		border-radius: 50%;
		width: 100%;
		height: 100%;
	}
	.msg{
		width: 528px;
	}
	.left{
		justify-content: space-between;
		padding-bottom: 10px;
	}
	.userName{
		font-size: 32px;
	}
	.userName text{
		max-width: 310px;
		white-space: nowrap;
		overflow: hidden;
	}
	.right image{
		width: 32px;
		height: 32px;
		margin-left: 10px;
	}
	.text{
		justify-content: space-between;
	}
	.txt{
		padding-top: 10px;
		font-size: 28px;
		white-space: nowrap;
		height: 44px;
		overflow: hidden;
		width: 450px;
		text-overflow: ellipsis;
	}
	.pot{
		background: #FF3B2F;
		color: #fff;
		font-size: 22px;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		line-height: 34px;
		text-align: center;
	}
	.list .time{
		color: #B9B9B9;
		font-size: 26px;
	}
	.bindhover{
		background: #f8f8f8;
	}
</style>
